<template>
	<div style="width: 98%">
		<el-row :gutter="20">
			<el-col :span="24">
				<div style="box-shadow: 0px 0px 5px rgb(0, 0, 0,0.2);background-color: #FFFFFF;padding: 20px;"
					align="center">
					<el-row>
						<el-col :span="24" style="margin-bottom: 20px;">
							<div style="text-align: left;">
								<span
									style="font-size: 17px;border-left: 5px #00aaff solid;padding-left: 7px;color: #00aaff;">常用乘客信息</span>
							</div>
						</el-col>
						<!-- 						<el-col :span="12">
							<div style="text-align: right;">
								<a href="javascript:;" style="color: #409EFF;text-decoration:none;">
									<span style="font-size: 15px;color: #00aaff;">添加乘客</span>
								</a>
							</div>
						</el-col> -->
					</el-row>
					<el-table :data="passengerList" stripe style="width: 100%"
						:header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
						<el-table-column prop="passenger_name" label="姓名"></el-table-column>
						<el-table-column prop="passenger_number" label="证件号"></el-table-column>
						<el-table-column prop="passenger_phone" label="手机号"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" type="danger" @click="passengerDelete(scope.$index, scope.row)">
									删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>

					<el-collapse style="border-top: none;border-bottom: none;margin-top: 10px;">
						<el-collapse-item style="border-bottom: none;border: none;">
							<template slot="title">
								<i class="el-icon-circle-plus-outline"
									style="margin-right: 5px;color: #00aaff;"></i><span
									style="font-size: 15px;color: #00aaff;">添加乘客</span>
							</template>

							<div style="width: 40%;text-align: left;">
								<el-form :model="passenger" :rules="rules" ref="passenger" class="demo-ruleForm">
									<div>
										<el-row>
											<el-col :span="6"
												style="height: 40px;text-align: right;padding-right: 10px;"><span
													style="line-height: 40px;">姓名</span></el-col>
											<el-col :span="18">
												<el-form-item prop="passenger_name">
													<el-input type="text" v-model="passenger.passenger_name"
														autocomplete="off" placeholder="乘客姓名">
													</el-input>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="6"
												style="height: 40px;text-align: right;padding-right: 10px;"><span
													style="line-height: 40px;">证件号</span></el-col>
											<el-col :span="18">
												<el-form-item prop="passenger_number">
													<el-input type="text" v-model="passenger.passenger_number"
														autocomplete="off" placeholder="乘客身份证号码"></el-input>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="6"
												style="height: 40px;text-align: right;padding-right: 10px;"><span
													style="line-height: 40px;">手机号</span></el-col>
											<el-col :span="18">
												<el-form-item prop="passenger_phone">
													<el-input type="text" v-model="passenger.passenger_phone"
														autocomplete="off" placeholder="乘客手机号(可为空)">
													</el-input>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="24" style="text-align: right;">
												<el-button type="primary" style="width: 30%;"
													@click="addPassenger('passenger')">添加乘客</el-button>
											</el-col>
										</el-row>
									</div>
								</el-form>
							</div>

						</el-collapse-item>
					</el-collapse>
				</div>
			</el-col>
		</el-row>

		<el-row :gutter="20" style="margin-top: 20px;">
			<el-col :span="24">
				<div style="box-shadow: 0px 0px 5px rgb(0, 0, 0,0.2);background-color: #FFFFFF;padding: 20px;"
					align="center">
					<div style="text-align: left;margin-bottom: 5px;">
						<span
							style="font-size: 17px;border-left: 5px #00aaff solid;padding-left: 7px;color: #00aaff;">登录历史</span>
					</div>
					<div style="text-align: left;margin-bottom: 20px;">
						<span style="font-size: 13px;color: #9d9d9d;">您最近的登录信息如下，如非本人登录，请您及时修改密码，提升安全等级</span>
					</div>
					<el-table :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"
						:data="loginRecord" style="width: 100%">
						<el-table-column label="登陆时间" prop="login_time"></el-table-column>
						<el-table-column label="登录地点" prop="landing_place"></el-table-column>
						<el-table-column label="IP地址" prop="ip"></el-table-column>
						<el-table-column label="登陆方式" prop="login_method"></el-table-column>
					</el-table>
				</div>
			</el-col>
		</el-row>

	</div>
</template>

<script>
	import axios from 'axios';

	export default {
		data() {
			var passenger_name = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入乘客姓名'));
				} else {
					callback();
				}
			};
			var passenger_number = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入乘客证件号'));
				} else {
					if (!this.isIdcard(value)) {
						callback(new Error('请输入正确的乘客证件号'));
						return;
					}
					callback();
				}
			};
			var passenger_phone = (rule, value, callback) => {
				if (value === '') {
					callback();
				} else {
					var reg = /^1[3456789]\d{9}$/;
					if (reg.test(value)) {
						callback();
					} else {
						callback(new Error('手机号码格式不正确'));
					}
				}
			};
			return {
				passengerList: [],
				loginRecord: [],
				passenger: {
					passenger_name: '',
					passenger_number: '',
					passenger_phone: ''
				},
				rules: {
					passenger_name: [{
						validator: passenger_name,
						trigger: 'blur'
					}],
					passenger_number: [{
						validator: passenger_number,
						trigger: 'blur'
					}],
					passenger_phone: [{
						validator: passenger_phone,
						trigger: 'blur'
					}]
				}
			}
		},
		created() {

			if (sessionStorage.getItem("eleToken") == null) {
				this.$alert("登录失效，请重新登录", '提示', {
					confirmButtonText: '确定',
					type: 'error',
					callback: action => {
						sessionStorage.removeItem("mailbox");
						sessionStorage.removeItem("sessionId");
						location.href = "/";
					}
				});
				return;
			}

			axios.post("api/PassengerAction/passengerList")
				.then((res) => {
					if (res.data.code === 200) {
						if (res.data.data !== undefined) {
							this.passengerList = res.data.data;
							for (var i = 0; i < this.passengerList.length; i++) {
								if (this.passengerList[i].passenger_phone == "") {
									this.passengerList[i].passenger_phone = "无";
								}
							}
						} else {
							this.passengerList = [];
						}
					} else {
						if (res.data.code === 401 || res.data.code === 403) {
							this.$alert(res.data.msg, '提示', {
								confirmButtonText: '确定',
								type: 'error',
								callback: action => {
									sessionStorage.removeItem("eleToken");
									sessionStorage.removeItem("mailbox");
									sessionStorage.removeItem("sessionId");
									location.href = "/";
								}
							});
						} else {
							this.$message({
								dangerouslyUseHTMLString: true,
								message: '<strong>' + res.data.msg + '</strong>',
								type: 'error'
							});
						}
					}
				});
				
			axios.post("api/LoginRecordAction/queryLoginInformation")
				.then((res) => {
					if (res.data.code === 200) {
						if (res.data.data !== undefined) {
							this.loginRecord = res.data.data;
							for (var i = 0; i < this.loginRecord.length; i++) {
								this.loginRecord[i].login_time = this.loginRecord[i].login_time
									.replace("T", " ");
							}
						} else {
							this.loginRecord = [];
						}
					} else {
						if (res.data.code === 401 || res.data.code === 403) {
							this.$alert(res.data.msg, '提示', {
								confirmButtonText: '确定',
								type: 'error',
								callback: action => {
									sessionStorage.removeItem("eleToken");
									sessionStorage.removeItem("mailbox");
									sessionStorage.removeItem("sessionId");
									location.href = "/";
								}
							});
						} else {
							this.$message({
								dangerouslyUseHTMLString: true,
								message: '<strong>' + res.data.msg + '</strong>',
								type: 'error'
							});
						}
					}
				});
		},
		methods: {
			passengerDelete(index, row) {
				console.log(index, row);
				this.$confirm('是否删除姓名:' + row.passenger_name + " 的乘客信息?", '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					
					var formData = new FormData();
					formData.append('passenger_id', row.passenger_id);
					
					axios.post("api/PassengerAction/delPassenger", formData)
						.then((res) => {
							if (res.data.code === 200) {
								this.passengerList.splice(index, 1);
							} else {
								if (res.data.code === 401 || res.data.code === 403) {
									this.$alert(res.data.msg, '提示', {
										confirmButtonText: '确定',
										type: 'error',
										callback: action => {
											sessionStorage.removeItem("eleToken");
											sessionStorage.removeItem("mailbox");
											sessionStorage.removeItem("sessionId");
											location.href = "/";
										}
									});
								} else {
									this.$message({
										dangerouslyUseHTMLString: true,
										message: '<strong>' + res.data.msg + '</strong>',
										type: 'error'
									});
								}
							}
						});
					
				}).catch(() => {
				});
			},
			addPassenger(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var formData = new FormData();
						formData.append('passenger_name', this.passenger.passenger_name);
						formData.append('passenger_number', this.passenger.passenger_number);
						formData.append('passenger_phone', this.passenger.passenger_phone);

						axios.post("api/PassengerAction/addPassenger", formData)
							.then((res) => {
								if (res.data.code === 200) {
									location.reload();
								} else {
									if (res.data.code === 401 || res.data.code === 403) {
										this.$alert(res.data.msg, '提示', {
											confirmButtonText: '确定',
											type: 'error',
											callback: action => {
												sessionStorage.removeItem("eleToken");
												sessionStorage.removeItem("mailbox");
												sessionStorage.removeItem("sessionId");
												location.href = "/";
											}
										});
									} else {
										this.$message({
											dangerouslyUseHTMLString: true,
											message: '<strong>' + res.data.msg + '</strong>',
											type: 'error'
										});
									}
								}
							});
					}
				});
			},
			isIdcard(value) {
				var sId = value;
				if (sId.length == 15) {
					if (!/^\d{14}(\d|x)$/i.test(sId)) {
						this.message = "你输入的身份证长度或格式错误";
						return false;
					} else {
						sId = sId.substr(0, 6) + '19' + sId.substr(6, 9);
						sId += getVCode(sId);
					}
				}

				function getVCode(CardNo17) {
					var Wi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1);
					var Ai = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
					var cardNoSum = 0;
					for (var i = 0; i < CardNo17.length; i++) cardNoSum += CardNo17.charAt(i) * Wi[i];
					var seq = cardNoSum % 11;
					return Ai[seq];
				}
				var aCity = {
					11: "北京",
					12: "天津",
					13: "河北",
					14: "山西",
					15: "内蒙古",
					21: "辽宁",
					22: "吉林",
					23: "黑龙江",
					31: "上海",
					32: "江苏",
					33: "浙江",
					34: "安徽",
					35: "福建",
					36: "江西",
					37: "山东",
					41: "河南",
					42: "湖北",
					43: "湖南",
					44: "广东",
					45: "广西",
					46: "海南",
					50: "重庆",
					51: "四川",
					52: "贵州",
					53: "云南",
					54: "西藏",
					61: "陕西",
					62: "甘肃",
					63: "青海",
					64: "宁夏",
					65: "新疆",
					71: "台湾",
					81: "香港",
					82: "澳门",
					91: "国外"
				};

				var iSum = 0;
				var info = "";
				if (!/^\d{17}(\d|x)$/i.test(sId)) {
					return false;
				}
				sId = sId.replace(/x$/i, "a");
				if (aCity[parseInt(sId.substr(0, 2))] == null) {
					return false;
				}
				var sBirthday = sId.substr(6, 4) + "-" + Number(sId.substr(10, 2)) + "-" + Number(sId.substr(12, 2));
				var d = new Date(sBirthday.replace(/-/g, "/"));
				if (sBirthday != (d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())) {
					return false;
				}
				for (var i = 17; i >= 0; i--) iSum += (Math.pow(2, i) % 11) * parseInt(sId.charAt(17 - i), 11);
				if (iSum % 11 != 1) {
					return false;
				}
				return true;
			}
		}
	}
</script>

<style>
</style>
